<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>辅导答疑平台-首页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/css/bootstrap3.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
    </script>
    <style>
        .question-disc {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }

        .question-rank {
            width: 18px;
            padding-right: 3px;
        }
    </style>
</head>

<body style="background-color: #efefef;">
<div th:insert="template::header"></div>
<div class="container-fluid bg-secondary">
    <div class="row">
        <div class="col-sm-12">
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" style="background-color: white;">
                <h3>
                    <i class="fa fa-book fa"></i>
                    <span>人工问题库</span>
                </h3>
                <ul class="nav nav-tabs">
                    <li role="presentation" th:class="${subject}==1?'active':''"><a href="/?subject=1">语文</a></li>
                    <li role="presentation" th:class="${subject}==2?'active':''"><a href="/?subject=2">数学</a></li>
                    <li role="presentation" th:class="${subject}==3?'active':''"><a href="/?subject=3">英语</a></li>
                    <li role="presentation" th:class="${subject}==4?'active':''"><a href="/?subject=4">编程</a></li>
                </ul>
                <div class="media" th:each="question:${questionList.list}">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded" src="/img/logo.jpg" style="width:38px; height: 38px;"
                                 alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><a th:href="@{'/question/'+${question.questionId}}"
                                                     th:text="${question.title}"></a></h4>
                        <div class="question-disc"><span th:text="${question.name}"></span>&nbsp &nbsp<span
                                th:text="${#dates.format(question.createTime, 'yyyy-MM-dd HH:mm')}"></span></div>
                    </div>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li th:if="${questionList.isFirstPage == false}">
                            <a href="?page=1" aria-label="Previous">
                                <span aria-hidden="true">&lt;&lt;</span>
                            </a>
                        </li>
                        <li th:if="${questionList.isHasPreviousPage() == true}">
                            <a th:href="@{/(page=${questionList.pageNum - 1})}" aria-label="Previous">
                                <span aria-hidden="true">&lt;</span>
                            </a>
                        </li>
                        <li th:each="page : ${#numbers.sequence(1, questionList.pages)}"
                            th:class="${questionList.pageNum == page}?'active':'' ">
                            <a th:href="@{/(page=${page})}" th:text="${page} "></a>
                        </li>
                        <li th:if="${questionList.isHasNextPage()}">
                            <a th:href="@{/(page=${questionList.pageNum + 1})}" aria-label="Next">
                                <span aria-hidden="true">&gt;</span>
                            </a>
                        </li>
                        <li th:if="${questionList.isIsLastPage() == false}">
                            <a th:href="@{/(page=${questionList.getPages()})}" aria-label="Next">
                                <span aria-hidden="true">&gt;&gt;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 bg-info">
                <h3>
                    <i class="fa fa-paper-plane-o"></i>
                    <span>热门问题</span>
                </h3>
                <ul class="list-group">
                    <li class="list-group-item"><img class="question-rank" src="/img/icon-1.png">Cras justo odio</li>
                    <li class="list-group-item"><img class="question-rank" src="/img/icon-2.png">Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item"><img class="question-rank" src="/img/icon-3.png">Morbi leo risus</li>
                    <li class="list-group-item"><img class="question-rank" src="/img/icon-4.png">Porta ac consectetur ac
                    </li>
                    <li class="list-group-item"><img class="question-rank" src="/img/icon-5.png">Vestibulum at eros</li>
                </ul>
            </div>
        </div>

    </div>
</div>
<div th:insert="template::footer"></div>
</body>

</html>